<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
      <el-form-item label="任务编码" prop="taskNo">
        <el-input
          v-model="queryParams.taskNo"
          placeholder="请输入任务编码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="任务名称" prop="taskName">
        <el-input
          v-model="queryParams.taskName"
          placeholder="请输入任务名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="税地名称" prop="taxCompanyName">
        <el-input
          v-model="queryParams.taxCompanyName"
          placeholder="请输入接收方"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="类型" prop="type">
        <el-select
          v-model="queryParams.type"
          placeholder="请选择类型"
          clearable
          style="width: 240px">
          <el-option label="增加" :value="1" />
          <el-option label="扣除" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="交易时间">
        <el-date-picker
          v-model="dateRange"
          style="width: 240px"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="balanceRecordList" >
        <el-table-column label="税源地名称" align="center" prop="taxCompanyName" min-width="200" />
      <el-table-column label="任务编码" width="180" align="center" prop="taskNo" />
      <el-table-column label="任务名称" width="180" align="center" prop="taskName" />
      <el-table-column label="产品" align="center" prop="productName" min-width="200" />
      <el-table-column label="类型" align="center" prop="type" min-width="110" >
        <template slot-scope="{ row }">
          <el-tag v-if="row.type === 1">增加</el-tag>
          <el-tag type="info" v-else-if="row.type === 2">扣除</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="对方类型" align="center" min-width="120">
        <template slot-scope="{ row }">
          <span v-if="row.acceptUserType === 0">总后台</span>
          <span v-else-if="row.acceptUserType === 1">平台</span>
          <span v-else-if="row.acceptUserType === 2">代理</span>
          <span  v-else-if="row.acceptUserType === 3">税地</span>
          <span v-else-if="row.acceptUserType === 4">企业</span>
        </template>
      </el-table-column>
      <el-table-column label="对方户" align="center" prop="initiateCompanyName" min-width="200" />
      <el-table-column label="交易前余额" align="center" prop="beforeAmount" min-width="120" />
      <el-table-column label="交易余额" align="center" prop="amount" min-width="120" />
      <el-table-column label="交易后余额" align="center" prop="afterAmount" min-width="120" />
      <el-table-column label="交易时间" align="center" prop="createTime" min-width="180" />
      <el-table-column label="用途" fixed="right"  align="center" prop="purpose" min-width="150" />
      <template slot="empty">
        <el-empty :image-size="100"></el-empty>
      </template>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

  </div>
</template>

<script>
import { listBalanceRecord } from "@/api/transfer/balanceRecord"
import store from "@/store";

export default {
  name: "BalanceRecord",
  props:{
    taxOrganizationId:{
      type: String,
      default:null
    }
  },
  data() {
    return {
      // 遮罩层
      loading: true,

      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 账户余额变动记录表格数据
      balanceRecordList: [],
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        type: null,
        taskNo:null,
        taskName:null,
        userType:null,
        taxOrganizationId:null,
      },
      dateRange: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },
  // created() {
  //   this.getList()
  // },
  methods: {
    /** 查询账户余额变动记录列表 */
    getList() {
      this.loading = true
      listBalanceRecord(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
        this.balanceRecordList = response.rows
        this.total = response.total
        this.loading = false
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = []
      this.resetForm("queryForm")
      this.handleQuery()
    },

    /** 导出按钮操作 */
    handleExport() {
      this.download('transfer/balanceRecord/export', {
        ...this.queryParams
      }, `余额变动记录_${new Date().getTime()}.xlsx`)
    }
  },
  watch:{
    taxOrganizationId:{
      handler(val){
        this.queryParams.taxOrganizationId = val
        this.queryParams.userType = store.getters.organizationType
        this.getList()
      },
      immediate:true,deep:true
    }
  }
}
</script>
